<template>
  <div class="settings-page">
    <div class="container page">
      <div class="row">

        <div class="col-md-6 offset-md-3 col-xs-12">
          <h1 class="text-xs-center">Your Settings</h1>

          <form @submit.prevent="handleSubmit">
            <fieldset>
              <fieldset class="form-group">
                <input v-model="user.image" class="form-control" type="text" placeholder="URL of profile picture">
              </fieldset>
              <fieldset class="form-group">
                <input v-model="user.username" class="form-control form-control-lg" type="text" placeholder="Your Name">
              </fieldset>
              <fieldset class="form-group">
                <textarea v-model="user.bio" class="form-control form-control-lg" rows="8" placeholder="Short bio about you"></textarea>
              </fieldset>
              <fieldset class="form-group">
                <input v-model="user.email" class="form-control form-control-lg" type="text" placeholder="Email">
              </fieldset>
              <fieldset class="form-group">
                <input v-model="user.password" class="form-control form-control-lg" type="password" placeholder="Password">
              </fieldset>
              <button class="btn btn-lg btn-primary pull-xs-right">
                Update Settings
              </button>
            </fieldset>
          </form>

          <br />
          <button @click="logout" class="btn btn-outline-danger">
            Or click here to logout.
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { getCurrentUser, updateCurrentUser, logout } from '@/api/user.js'
  import Cookie from 'js-cookie'

	export default {
		middleware: 'authenticated',
		name: 'SettingsIndex',
    data () {
      return {
        user: {}
      }
    },
    created() {
      this.getCurrentUser()
    },
    methods: {
      async getCurrentUser() {
        const { data } = await getCurrentUser()
        
        this.user = data.user
      },
      async handleSubmit() {
        const { username, email, image, bio, password } = this.user
        await updateCurrentUser({ user: { username, email, image, bio, password } })

        this.$router.push('/')
      },
      async logout() {
        this.$store.commit('setUser', null)
        Cookie.remove('user')
        this.$router.push('/')
      }
    }
	}
</script>

<style lang='less' scoped>

</style>